<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var arr = [1, 2, 3, 4, 5, 6, 7];
    var arr2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    var str = 'abcdefg'

    console.log("原数组", arr);
    /*
      join():将数组转化为字符串
      @param: string, 分隔符
    */
    var arr3 = [...arr]
    arr.join(',');
    console.log("join(): ", arr3); // [1, 2, 3, 4, 5, 6, 7]

    /*
      push(): 接收任意数量的参数，逐个添加到末尾,并返回修改后数组的长度
      @param: 添加到末尾的值
    */
    arr4 = [...arr];
    arr4.push(8)
    console.log("push(): ", arr4); // [1, 2, 3, 4, 5, 6, 7, 8]

    /*
      pop(): 移除数组末尾最后一项,减少数组的length值，返回移除的项
    */
    arr5 = [...arr];
    arr5.pop()
    console.log("pop():", arr5) // [1,2,3,4,5,6]

    /*
      shift(): 删除原数组第一项，返回删除元素的值
    */
    arr6 = [...arr];
    arr6.shift();
    console.log("shift(): ", arr6); // [2, 3, 4, 5, 6, 7]

    /*
      unshift(): 将参数添加到原数组的开头,返回数组的长度
      @param: 需要添加到数组的参数
    */
    arr7 = [...arr];
    arr7.unshift(1);
    console.log("unshift(): ", arr7); // [1, 1, 2, 3, 4, 5, 6, 7]

    /*
      sort(): 按升序排列数组项，即最小的值排在最前面，最大的值排在最后面
    */
    arr8 = [5, 6, 3, 1, 2, 4, 7];
    arr8.sort();
    console.log("sort(): ", arr8); //[1, 2, 3, 4, 5, 6, 7]

    /*
      reverse(): 反转数组的顺序
    */
    arr9 = [...arr2];
    arr9.reverse();
    console.log("reverse():", arr9); // ['g', 'f', 'e', 'd', 'c', 'b', 'a']

    /*
      concat(): 将参数添加到原数组中，这个方法会先创建当前数组一个副本，然后将接收到的参数先添加到这个副本的末尾
      最后返回新构建的数组，在没有给concat方法传递参数的情况下，它只是复制当前数组并返回副本
    */
    arr10 = [...arr];
    console.log('concat(): ', arr10.concat(8)); //[1, 2, 3, 4, 5, 6, 7, 8]
    console.log("arr10 ", arr10); //[1, 2, 3, 4, 5, 6, 7]

    /*
      slice(): 返回原数组中指定开始下标到结束下标之间的项组成一个新数组
      @param1: 起始位置
      @param2: 结束位置
      在只有一个参数的情况下，slice方法返回从该参数指定位置开始到当前数组末尾的所有项
    */
    arr11 = arr.slice(2, 6);
    console.log("slice():", arr11) // [3, 4, 5, 6]

    /*
      splice(): 可以实现删除、插入、替换
      删除值: 可以删除任意数量的项
      插入值: 可以向指定位置插入任意数量的项
      替换值: 可以向指定位置插入任意数量的项，且同时删除任意数量的项
        @param1: 起始位置
        @param2: 要删除多少项
        @param3: 要插入的值(后面可传入多个参数)
    */

    arr12 = [...arr];

    // 删除
    arr12.splice(0, 4);
    console.log("splice删除 ", arr12); // [5, 6, 7]
    // 插入
    arr12.splice(0, 0, 1, 2, 3, 4)
    console.log('splice插入: ', arr12); // [1, 2, 3, 4, 5, 6, 7]
    // 替换
    arr12.splice(0, 4, 'a', 'b', 'c', 'd')
    console.log('splice替换', arr12); // ['a', 'b', 'c', 'd', 5, 6, 7]

    /*
      indexOf(): 查找项，从起点位置向后查找
      lastIndexOf(): 查找项，从数组末尾向前查找
        @param1: 要查找的项
        @param2: 起点位置
      如未查到到该项，则返回-1
    */
    arr13 = [...arr];
    var result = arr.indexOf(3);
    console.log(result); // 2

    /*
      forEach(): 对数组进行遍历循环,对数组中的每一项运行给定函数,
      这个方法没有返回值，参数都是function类型，默认有传参
      参数分别为:
      @param1: 遍历的数组内容
      @param2: 对应的数组索引
      @param3: 数组本身
    */
    arr14 = [...arr];
    arr14.forEach((item, index) => {
      console.log(`数组arr14第${index}项: ${item}`)
    });

    /*
      map(): 映射, 对数组中的每一项运行给的函数，返回每次函数调用的结果组成的数组
      filter(): 过滤，对数组中的每一项运行给定函数，返回满足过滤条件组成的数组
    */
    arr15 = [...arr];
    arr16 = arr15.map(item => {
      return Math.ceil(item * Math.PI);
    });
    console.log(`PI值向上取整`, arr16);

    arr17 = arr15.filter(item => {
      return item < 4;
    })
    console.log("数组中小于4的值有: ", arr17);
  </script>
</body>

</html>